<template>
  <div
    class="w-full h-full flex flex-col justify-center items-center gap-4 relative overflow-hidden"
    :style="{
      backgroundImage: `url(${user.userInfo?.bgImage ?? ''})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    }"
    @click="IsClick = true"
  >
    <div class="w-full absolute top-0 left-0">
      <windowTab obj="child" fontColor="text-white"></windowTab>
    </div>
    <Transition name="slide-fade" appear>
      <div
        v-if="IsClick"
        class="fixed top-0 left-0 w-full h-full flex flex-col justify-center items-center bg-black bg-opacity-50 text-white"
      >
        <div class="lockContainer">
          <div class="flex flex-col justify-center items-center gap-2">
            <n-avatar :src="user.avatar" :size="128" round />
            <p class="text-xl">{{ user.userInfo?.name ?? "" }}</p>
          </div>
          <div class="w-full flex flex-col justify-center items-center mt-2">
            <n-input
              type="password"
              round
              placeholder="请输入解锁密码"
              v-model:value="password"
              show-password-on="click"
              @keyup.enter="handleUnlock"
              style="width: 320px; background-color: #404040; color: #fff"
            >
              <template #suffix>
                <div class="pr-4 cursor-pointer">
                  <component :is="RenderIcon(ArrowForward, 'text-white')"></component>
                </div>
              </template>
            </n-input>
          </div>
        </div>
      </div>
      <h2
        v-else
        class="text-center text-2xl font-semibold absolute text-white flex justify-center items-center w-full h-full"
      >
        <component :is="RenderIcon(LockClosed, 'text-white')"></component>
        窗口已锁定
      </h2>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { LockClosed, ArrowForward } from "@vicons/ionicons5";
import { useUser } from "@/store/modules/user";
import { RenderIcon } from "@/utils/common.ts";
import { ref } from "vue";
import { NInput, NAvatar } from "naive-ui";
import { useSystem } from "@/store/modules/system";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import windowTab from "@/components/WindowTab/index.vue";
const system = useSystem();
const user = useUser();
let password = ref("");
const router = useRouter();
let IsClick = ref(false);
function handleUnlock() {
  if (password.value === "") return;
  if (system.LockScreenData.password != password.value) {
    ElMessage.error("密码错误");
    return;
  }
  router.push("/message");
}
</script>

<style lang="scss" scoped>
.lockContainer {
  width: 400px;
  height: 300px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;

  padding: 40px;
  border-radius: 10px;
}
.slide-fade-enter-active {
  transition: all 0.2s ease-in-out;
}

.slide-fade-leave-active {
  transition: all 0.6s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
:v-deep(.n-input__input-el) {
  color: #fff !important;
}
</style>
